<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 */
        ol li {
            color: pink;
        }

        /* 子代选择器 */
        .nav>a {
            color: red;
        }

        /* 并集选择器 */
        /* 要求1:将熊大熊二改成粉色 */
        /* div,
        p {
            color: pink;
        } */
        /* 要求2:把熊大熊二改为粉色,1,2,3改为粉色 */
        div, p, .pig>li {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 
        1.1 什么是复合选择器

            在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
            复合选择器可以更准确、更高效的选择目标元素（标签)
            复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
            常用的复合选择器包括︰后代选择器、子选择器、并集选择器、伪类选择器等等
     -->

    <!-- 
        1.2 后代选择器(重要)

            后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
            当标签发生嵌套时，内层标签就成为外层标签的后代。
            
            语法︰

            元素1 元素2 { 样式声明}
            上述语法表示选择元素1里面的所有元素2(后代元系)。
            例如︰
            ul li {样式声明} /*选择ul里面所有的li标签元素*/
            元素1和元素2中间用空格隔开
            元素1是父级，元素2是子级，最终选择的是元素2
            元素2可以是儿子，也可以是孙了等，只要是元素1的后代即可
            元素1和元素2可以是任意基础选择器

      -->
    <ol>
        <li>这是ol的子元素</li>
        <li>这是ol的子元素</li>
        <li>这是ol的子元素</li>
    </ol>

    <ul>
        <li>这是ul的子元素</li>
        <li>这是ul的子元素</li>
        <li>这是ul的子元素</li>
    </ul>

    <!-- 
        1.3 子选择器(重要)

            子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

            语法︰

            元素1>元素2{样式声明}

            上述语法表示选择元素1里面的所有直接后代(子元素)元素2。
            例如∶
            div > p {样式声明}  /*选择div里面所有最近一级p标签元素*/
            元素1和元素2中间用大于号隔开
            元素1是父级，元素2是子级，最终选择的是元素2
            元素2必须是亲儿子，其孙子、重孙之类都不归他管.可以叫他亲儿子选择器
      -->
    <div class="nav">
        <a href="#">这是儿子元素</a>
        <p>
            <a href="#">这是孙子元素</a>
        </p>
    </div>

    <!-- 
        1.4 并集选择器(重要)

            并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明.
            并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。
            
            语法︰
            元素1,元素2{ 样式声明}
            
            上述语法表示选择元素1和元素2。
            
            例如︰
            ul,div { 样式声明}   /*选择ul和div标签元素*/

            元素1和元素2中间用逗号隔开
            逗号可以理解为和的意思
            并集选择器通常用于集体声明

     -->
    <div>熊大</div>
    <p>熊二</p>
    <ul class="pig">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

</html>